<template>
  <div class="productOrder-container">
    <div class="container" v-show="showproductOrder">
      <div class="order">
        <div class="container-query">
          <el-form :inline="true" size="mini">
            <el-form-item>
              <el-select clearable placeholder="订单类型" v-model="ordertype" @change="places($event)" class="select">
                <el-option :label="c3.title" :value="c3.id" v-for="c3 in ordertypeoption" :key="c3.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input v-model="productid" placeholder="订单主键、openId"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="vipsort" placeholder="会员编号"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="productname" placeholder="商品名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-select clearable placeholder="订单状态" v-model="orderstate" @change="placesstate($event)" class="select">
                <el-option :label="c3.title" :value="c3.id" v-for="c3 in orderstateoption" :key="c3.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input v-model="vipname" placeholder="联系人姓名、联系人电话"></el-input>
            </el-form-item>
            <el-form-item>
              <el-date-picker v-model="valuedata" placeholder="创建日期" style="width:200px" value-format="yyyy-MM-dd">
              </el-date-picker>--
              <el-date-picker v-model="valueover" placeholder="" style="width:200px" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
            <!-- <el-form-item>
              <el-date-picker v-model="valueover"   placeholder="支付时间"  value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item> -->

            <el-form-item>
              <!-- <el-button type="primary" @click="reset" class="sizezs" size="mini">重置</el-button> -->
              <el-button type="primary" @click="query" class="sizezs" size="mini">查询</el-button>
              <download-excel class="querybutton" id="querybutton" :data="tableData" :fields="json_fields"
                worksheet="My Worksheet" name="商品订单列表">导出
              </download-excel>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="container-table">
        <el-table :data="tableData" border stripe size="mini" style="width: 120%" :header-cell-style="{
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
          
        }">
          <el-table-column prop="orderId" label="订单号" align="center"></el-table-column>
          <!-- <el-table-column prop="typeId" label="类型" align="center"> -->
          <!-- <template slot-scope="scope">
              <template v-if="scope.row.typeId == '0'">普通订单</template>
              <template v-if="scope.row.typeId == '10'">团单</template>
              <template v-if="scope.row.typeId == '20'">
                秒杀单</template>
              <template v-if="scope.row.typeId == '30'"> 商品组合单 </template>
              <template v-if="scope.row.typeId == '40'">权益兑换</template>
              <template v-if="scope.row.typeId == '90'">混合订单</template>
            </template> -->
          <!-- </el-table-column>
          <el-table-column prop="nickName" label="昵称" align="center">
          </el-table-column>

          <el-table-column prop="openId" label="openId" width="160" align="center">
          </el-table-column> -->
          <el-table-column prop="customerId" label="会员编号" align="center">
          </el-table-column>
          <el-table-column prop="productName" label="商品名称" width="160" align="center">
          </el-table-column>
          <el-table-column prop="productNumber" label="商品数量" align="center">
          </el-table-column>
          <!-- <el-table-column prop="customerName||cardCode||contractPhoneOne" label="会员信息" width="170" align="center">
            <template slot-scope="scope">
              <span>市场{{ scope.row.customerName }}</span>
              <span>成本{{ scope.row.cardCode }}</span>
              <span>销售{{ scope.row.contractPhoneOne }}</span>
            </template>
          </el-table-column>
           -->
          <el-table-column prop="payAmount" label="支付金额" align="center">
          </el-table-column>
          <el-table-column prop="status" label="状态" align="center">
            <template slot-scope="scope">
              <template v-if="scope.row.status == 'waitPay'">等待支付</template>
              <template v-if="scope.row.status == 'cancelPay'">取消支付</template>
              <template v-if="scope.row.status == 'failPay'">
                失败支付</template>
              <template v-if="scope.row.status == 'payd'"> 已支付</template>
              <template v-if="scope.row.status == 'cancelled'">已取消</template>
              <template v-if="scope.row.status == 'refunding'">退款中</template>
              <template v-if="scope.row.status == 'refundSuccess'">退款成功</template>
              <template v-if="scope.row.status == 'refundFailed'">退款失败</template>
            </template>
          </el-table-column>
          <el-table-column prop="customerName" label="客户常用名" width="100" align="center">
          </el-table-column>
          <el-table-column prop="createTime" label="会员卡号" align="center">
          </el-table-column>
          <el-table-column prop="createTime" label="联系人电话" width="100" align="center">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="160" align="center">
          </el-table-column>
          <el-table-column prop="payAmount" label="支付金额" width="160" align="center">
          </el-table-column>
          <el-table-column prop="payTime" label="支付时间" width="160" align="center">
          </el-table-column>
          <el-table-column prop="address" label="操作" align="center" width="180">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="edit(scope.row)">详情</el-button>
              <el-button type="primary" size="mini" @click="returnOrder(scope.row)">退单</el-button>

            </template>
          </el-table-column>
        </el-table>
        <el-pagination align="center" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="[10, 15, 20]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
        </el-pagination>
      </div>
    </div>

    <div v-show="!showproductOrder" class="container-detail">
      <div>
        <!-- <el-divider content-position="left">少年包青天</el-divider> -->
        <p class="detail-item-p">
          <span v-show="ordertail.orderId">订单编号:{{ this.ordertail.orderId }}</span>
          <span v-show="ordertail.typeId">订单类型:{{ this.ordertail.typeId }}</span>
          <span>订单状态
            {{ ordertail.status }}
            <!-- 订单状态:{{
              ordertail.status == "waitPay"
                ? "等待支付"
                : ordertail.status == "cancelPay"
                ? "取消支付"
                : ordertail.status == "failPay"
                ? " 失败支付"
                : ordertail.status == "payd"
                ? " 已支付"
                : ordertail.status == " refunding"
                ? " 退款中"
                : ordertail.status == "  refundSuccess"
                ? "  退款成功"
                : ordertail.status == " refundFailed"
                ? " 退款失败"
                : "..."
            }} -->
          </span><br />
          <span v-show="ordertail.nickName">用户昵称:{{ this.ordertail.nickName }}</span><br />
          <span v-show="ordertail.customerId">会员编号:{{ this.ordertail.customerId }}</span><br />
          <span v-show="ordertail.createTime">创建时间:{{ this.ordertail.createTime }}</span><br />
          <span v-show="ordertail.remarks">订单备注:{{ this.ordertail.remarks }}</span><br />
          <span v-show="ordertail.activityId">活动编号:{{ this.ordertail.activityId }}</span><br />
          <span v-show="ordertail.activityName">活动名称:{{ this.ordertail.activityName }}</span><br />
        </p>
      </div>
      <!-- 支付信息 -->
      <p class="payment">
        <el-divider content-position="left">支付信息</el-divider>
        <span>支付时间:{{ this.ordertail.payTime }}</span>
        <span>流水号:{{ this.ordertail.transactionId }}</span>
      </p>
      <!-- 订单商品 -->
      <el-divider content-position="left">订单商品</el-divider>
      <div class="merchandise">
        <div class="merchandise-table">
          <el-table :data="productDetails" border style="width: 100%" :fit="true">
            <el-table-column prop="imgPath" label="">
              <template slot-scope="scope">
                <img slot="reference" :src="scope.row.imgPath" style="width: 55px; height: 55px" />
              </template>
            </el-table-column>
            <el-table-column prop="productName" label="商品名称">
            </el-table-column>
            <el-table-column label="规格X数量">
              <template slot-scope="scope">
                <span>{{ scope.row.specName }} x {{ scope.row.number }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="expressNo" label="快递单号">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button v-if="scope.row.expressNo==null" type="primary" size="mini" @click="backfill(scope.row)">回填单号
                </el-button>
              </template>

            </el-table-column>

          </el-table>
        </div>
        <div class="merchandise-detail">
          <p>订单金额：&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;{{ ordertail.amount }}</p>
          <p>优惠券：&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;{{ 0 }}</p>
          <p>商品兑换券&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;{{ 0 }}</p>
          <p>
            实付金额&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;{{ ordertail.payAmount }}
          </p>
        </div>
        <el-button @click="showpro" class="showpro">关闭</el-button>
      </div>
    </div>
    <!-- 回填单号弹窗 -->
    <el-dialog title="回填单号" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
      <div>
        <el-input v-model="expressNo" placeholder="请输入快递单号"></el-input>
      </div>
      <div style="margin:20px 0 0 0">
        <el-button type="primary" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="determineexpressNo">确定</el-button>
      </div>
    </el-dialog>
    <!-- 退单 -->
    <el-dialog title="退单" :visible.sync="refunddialogVisible" width="30%">
      <span>确认退单吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="refunddialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="getmallOrderRefund">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "productOrder",
    data() {
      return {
        refunddialogVisible: false, //退单弹窗
        refundorderId: "",
        roworderId: null,
        orderProductId: "",
        // 回填单号
        expressNo: "",
        dialogVisible: false,
        ordertail: "", //编辑详情的对象
        pageTotal: 0,
        pageSize: 10,
        currentPage: 1,
        json_fields: {
          订单号: "orderId",
          会员姓名名: "customerName",
          会员卡号: "cardCode",
          商品名称: "productName",
          商品数量: "productNumber",
          订单金额: "payAmount",
          供应商: "productDetails.mallProductSupplier.supplierName",
          订单金额: "payAmount",








          类型: "typeId",
          昵称: "nickName",
          状态: "status",
          联系人电话: "contractPhoneOne",
          创建时间: "createTime",
          支付时间: "payTime",
          OPENID: "openId",
        }, //导出的表格的数据
        status: null,
        order: "", //
        typeId: "", //订单类型最后传值
        productDetails: [], //小表格数组
        showproductOrder: true, //控制展示列表和编辑列表的显示隐藏
        valuedata: "", //日期开始数组
        valueover: "", //日期结束的时间
        ordertype: "", //订单类型
        productname: "", //商品名称
        productid: "", //订单id
        vipsort: "",
        vipname: "",
        ordertypeoption: [{
            id: 1,
            title: "全部订单",
          },
          {
            id: 0,
            title: "普通订单",
          },

          {
            id: 10,
            title: "团单",
          },
          {
            id: 20,
            title: "杀单",
          },
          {
            id: 30,
            title: "商品组合单",
          },
          {
            id: 40,
            title: "权益兑换",
          },
          {
            id: 90,
            title: "混合订单",
          },
        ],
        orderstateoption: [{
            id: "waitPay",
            title: "等待支付",
          },
          {
            id: "cancelPay",
            title: "取消支付",
          },
          {
            id: "failPay",
            title: "支付失败",
          },
          {
            id: "payd",
            title: "已支付",
          },
          {
            id: "cancelled",
            title: "已取消",
          }, {
            id: "refunding",
            title: "退款中",
          },
          {
            id: "refundSuccess",
            title: "退款成功",
          }, {
            id: "refundFailed",
            title: "退款失败",
          },
        ],
        orderstate: "",
        vipname: "", //会员手机号
        tableData: [], //表格的数组 假数据
        orderdetail: {
          id: 0,
          detail1: null,
          detail2: null,
          detail3: null,
          detail4: null,
          detail5: null,
          detail6: null,
          detail7: null,
          detail8: null,
          detail9: null,
          detail10: null,
          detail11: null,
        }, //订单详情的假数据
        oerdermerchandise: [], //订单详情中订单商品到数据
      };
    },
    mounted() {
      this.mallOrderList(); //调用订单列表查询接口
    },
    methods: {
      // 退单按钮
      returnOrder(row) {
        console.log(row)
        this.refundorderId = row.orderId
        this.refunddialogVisible = true
      },
      // 退订接口
      getmallOrderRefund() {
        this.$axios.getmallOrderRefund({
          orderId: this.refundorderId
        }).then((res) => {
          if (res.code == "200") {
            this.$message({
              message: '退订成功',
              type: 'success'
            });
            this.refunddialogVisible = false

            this.viewproduct()
          }
        });
      },
      // 回填按钮
      determineexpressNo() {
        if (this.expressNo == '') {
          this.$message({
            message: '请填写快递单号',
            type: 'warning'
          });
        } else {
          this.$axios.getmallOrderProductedit({
            expressNo: this.expressNo,
            orderProductId: this.orderProductId
          }).then((res) => {
            console.log(res)
            if (res.code == 200) {
              this.dialogVisible = false
              this.$message({
                message: '回填单号成功',
                type: 'success'
              });
              this.$axios
                .orderBackstageDetails({
                  orderId: this.roworderId
                })
                .then((res) => {
                  this.ordertail = res.data;
                  this.productDetails = res.data.productDetails;
                });
            } else {
              // this.$message({
              //   message: '操作失败',
              //   type: 'warning'
              // });
            }
          })
        }
      },
      // 回填单号按钮
      backfill(row) {
        console.log(row)
        this.orderProductId = row.orderProductId
        this.expressNo = ""
        this.dialogVisible = true
      },
      // 点击重置时清空
      reset() {
        this.valuedata = null;
        this.valueover = null;
        this.ordertype = null;
        this.orderstate = null;
        this.productname = null;
        this.productid = null;
        this.vipsort = null;
        this.vipname = null;

        this.mallOrderList();
      },
      mallOrderList() {
        this.$axios
          .mallOrderList({
            startTime: this.valuedata,
            endTime: this.valueover,
            typeId: this.ordertype,
            status: this.orderstate,
            productName: this.productname,
            orderCodeOrOpenId: this.productid,
            customerId: this.vipsort,
            customerNameOrPhone: this.vipname,
          })
          .then((res) => {
            console.log(res.data);
            this.pageTotal = res.total;
            this.tableData = res.data;
            console.log(this.tableData);
            for (let i = 0; i < this.tableData.length; i++) {
              this.tableData[i].productDetailsexpressNo = this.tableData[i].productDetails[0].expressNo
              this.tableData[i].productDetailsoriginalPrice = this.tableData[i].productDetails[0].originalPrice
              this.tableData[i].productDetailsspecName = this.tableData[i].productDetails[0].specName
              this.tableData[i].supplierName = this.tableData[i].productDetails[0].mallProductSupplier.supplierName

            }
            console.log(this.tableData);

          });
      },
      handleSizeChange(value) {
        console.log("1", value);
        localStorage.setItem("pageSize", value);
        localStorage.setItem("pageNum", 1);
        this.mallOrderList();
        this.pageSize = value;
      },
      handleCurrentChange(value) {
        console.log("2", value);
        localStorage.setItem("pageNum", value);
        localStorage.setItem("pageSize", this.pageSize);
        this.currentPage = value;
        this.mallOrderList();
        // orders = res.data;
      },
      // 订单状态
      placesstate(value) {
        console.log(value);
      },
      placesname() {},
      // 点击出现查询事件
      query() {
        localStorage.setItem("pageNum", 1);
        localStorage.setItem("pageSize", 10);
        this.mallOrderList();
      },
      places(row) {
        this.ordertype = row;
      },

      showpro() {
        this.showproductOrder = true;
      },
      //后台订单详情
      // orderBackstageDetails(){
      //

      // },
      // 调用列表接口

      // 点击编辑调详情接口
      edit(row) {
        this.showproductOrder = false;
        // this.mallOrderList();
        console.log(row.orderId);
        this.roworderId = row.orderId
        this.$axios
          .orderBackstageDetails({
            orderId: this.roworderId
          })
          .then((res) => {
            this.ordertail = res.data;
            this.productDetails = res.data.productDetails;

          });
      },
      // deletct
      // 删除的接口
      // dele(row) {

      //   this.$confirm(`你确定删除吗`, "提示", {
      //       confirmButtonText: "确定",
      //       cancelButtonText: "取消",
      //       type: "warning",
      //       center: true,
      //     })
      //     .then(() => {
      //       // 点击确定按钮之后发请求

      //       this.$message({
      //         type: "success",
      //         message: "删除成功!",
      //       });
      //       // 再次获取列表的数据
      //       //   }
      //     })
      //     .catch(() => {
      //       this.$message({
      //         type: "info",
      //         message: "已取消删除",
      //       });
      //     });
      // },
    },
  };
</script>

<style scoped>
  .merchandise-detail {
    line-height: 50px;
    position: absolute;
    right: 0;
    top: 0;
    width: 500px;
    height: 200px;
  }

  .merchandise-table {
    width: 50%;
  }

  .merchandise {
    position: relative;
    width: 100%;
    margin-top: 50px;
  }

  .payment {
    margin-top: 20px;
  }

  .sizezs {
    width: 90px;
    background-color: #6090EC;
  }

  .payment span {
    margin-right: 180px;
    margin-top: 30px;
    display: inline-block;
  }

  .detail-item-p span {
    line-height: 60px;
    margin-right: 100px;
  }

  .container-detail {
    width: 100%;
    height: 898px;
    margin-left: 30px;
  }

  .order {
    padding-top: 5px;
  }

  /* .container-query { */
  /* padding: 10px auto; */
  /* margin: 20px auto; */
  /* } */

  .el-form {
    margin-left: 10px;
    margin-top: 10px;

  }

  .datablock {
    display: inline-block;
  }

  .datablock .demonstration {
    margin-right: 10px;
    margin-left: 10px;
  }

  .green {
    float: left;
    width: 10px;
    height: 100%;
    background-color: #6090ec;
  }

  .primary {
    margin: 20px;
    border-radius: 0px;
    background-color: #6090ec;
    border-color: transparent;
  }

  .select1 {
    margin-left: 10px;
  }

  .inputbox {
    /* width:100%; */
    width: 989px;
    display: inline-flex;
    margin: 10px;
  }

  .el-input__inner {
    margin-right: 10px;
  }

  .inputbox .el-input {
    margin-right: 10px;
  }

  .el-select {
    margin-right: 10px;
    margin-left: 10px;
  }

  .querybutton {
    width: 90px;
    height: 30px;
    background-color: #6090ec;
    margin-right: 15px;
  }

  .container-table {
    width: 100%;
    margin-left: 10px;
  }

  .yishen {
    height: 30px;
    text-align: center;
    background: #48b0fc;
    color: #fff;
  }

  .edit {
    width: 60px;
    height: 30px;
    font-size: 12px;
    text-align: center;
    background: #48b0fc;
    color: #fff;
  }

  .delt {
    width: 60px;
    font-size: 12px;
    margin: 6px;
    height: 30px;
    text-align: center;
    background: #ff5722;
    color: #fff;
  }

  .el-cha {
    margin-left: 25px;
  }

  #bluebtn {
    float: left;
    /* margin-right: 150px; */
    width: 50px
      /* 50/80 */
    ;
    height: 50px;
  }

  #querybutton {
    float: left;
    color: #fff;
    text-indent: 1.5rem;
    line-height: 35px;
  }

  .showpro {
    width: 100px;
    height: 50px;
    color: #fff;
    margin-left: 15%;
    margin-top: 20px;
    background-color: #6090ec;
  }
</style>